<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>部门列表</title>
    <script src="../../../static/kaige/js/szload.js"></script>
</head>

<body>
    <div class="kaige-body layui-form kaige-btn-radius" lay-filter="dept-index">
        <table class="layui-table" id="deptTable" lay-filter="deptTable" lay-size="sm"></table>
    </div>
    <script type="text/html" id="TPL-treeTable-header">
        <div class="layui-inline">
            <div class="kaige-select-div" id="company_id2_select_box"></div>
            <input type="hidden" id="company_id2_name"/>
            <input type="hidden" id="company_id2"/>
        </div>
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="reload"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="open-all"><i class="layui-icon layui-icon-down"></i> 全展开</button>
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="close-all"><i class="layui-icon layui-icon-right"></i> 全关闭</button>
        </div>        
    </script>
    <script type="text/html" id="TPL-treeTable-tdbar">
        <div class="layui-btn-group">
        <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="look"><i class="layui-icon layui-icon-eye"></i></a>
        <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
        <a class="layui-btn layui-bg-red layui-btn-sm"  lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
        </div>
    </script>
    <script>
        load_init_js(function () {
            layui.config({
                base: szoapcpath + '/static/kaige/layuiextend/'
            }).use(['kaige', 'tableSelect', 'xmSelect'], function () {
                var treeTable = layui.treeTable, $ = layui.$, kaige = layui.kaige, tableSelect = layui.tableSelect, form = layui.form, layer = layui.layer;
                var xmSelect2 = layui.xmSelect;
                var loadnum = 0;
                //查看图片
                // window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }
                // 渲染表格
                var deptre = treeTable.render({
                    elem: "#deptTable",
                    id: "IDdeptTable",
                    url: "/hrm.dept/index",
                    toolbar: '#TPL-treeTable-header',
                    height: 'full-35',
                    cols: [[
                        { field: 'id', title: 'ID', width: 50 },
                        { field: 'name', title: '名称', width: 150 },
                        { field: 'code', title: '编码', width: 120 },
                        { field: 'company_id_name', title: '所属单位', width: 200 },
                        { field: 'headman', title: '负责人', width: 100 },
                        { field: 'sort', title: '排序', width: 60, edit: 'text' },
                        { field: 'status', title: '状态', width: 100, align: 'center', templet: "#status_td" },
                        { fixed: "right", title: "操作", width: 200, align: "center", toolbar: "#TPL-treeTable-tdbar" },
                    ]],
                    page: false,
                    tree: {
                        view: { expandAllDefault: true, showIcon: false }
                    },
                    done: function () {
                        if (loadnum < 1) {
                            //所属单位
                            kaige.xmSelectTree({
                                id: 'company_id2',
                                url: '/select/companytree',
                                udata: { automatch: 1 },
                                radio: true,
                                clickClose: true,
                                style: {
                                    minHeight: '30px',
                                    lineHeight: '30px',
                                    borderRadius: '30px',
                                    height: '30px',
                                },
                                tips: '请选择单位',
                                callback: function (des) {
                                    //执行重载数据
                                    treeTable.reloadData('IDdeptTable', {
                                        where: {
                                            company_id: des.id
                                        }
                                    });
                                }
                            });
                            loadnum++;

                        }
                    }
                });

                // 表头工具栏工具事件
                treeTable.on("toolbar(deptTable)", function (obj) {
                    // 获取选中行
                    switch (obj.event) {
                        case "add":
                            btn_add();
                            break;
                        case "reload":
                            treeTable.reloadData('IDdeptTable');
                            break;
                        case "open-all":
                            treeTable.expandAll('IDdeptTable', true); // 展开全部节点
                            break;
                        case "close-all":
                            treeTable.expandAll('IDdeptTable', false); // 关闭全部节点
                            break;
                    }
                });

                // 单元格工具事件--此处是 filter  不是 id
                treeTable.on('tool(deptTable)', function (obj) {
                    switch (obj.event) {
                        case "look":
                            btn_look(obj.data);
                            break;
                        case "edit":
                            btn_edit(obj.data);
                            break;
                        case "del":
                            btn_del(obj.data);
                            break;
                    }
                });

                //监听单元格编辑
                treeTable.on('edit(deptTable)', function (obj) {
                    var udata = {
                        id: obj.data.id,
                        field: 'sort',
                        value: obj.value
                    };
                    szoa.post('/hrm.dept/setsort', udata, function (res) {
                        layer.tips('修改完成', obj.td);
                    });
                });


                function addeditform() {
                    //上级部门
                    kaige.xmSelectTree({
                        id: 'dept_id',
                        url: '/select/depttree',
                        udata: { automatch: 1 },
                        radio: true,
                        clickClose: true
                    });
                    //所属单位
                    kaige.xmSelectTree({
                        id: 'company_id',
                        url: '/select/companytree',
                        udata: { automatch: 1 },
                        radio: true,
                        clickClose: true
                    });
                    dselemployee();
                }
                //添加
                function btn_add() {
                    kaige.form({
                        title: '<i class="layui-icon layui-icon-add-circle"></i> 添加'
                        , url: '/hrm.dept/add' //数据源
                        , data: {}
                        , id: 'kaige'
                        , area: ['800px', '450px']
                        , encode: 1
                        , callbefore: function () {
                            addeditform();
                        }
                        , postbefore: function (udata) {
                            var updata = udata;
                            updata.is_lock = updata.is_lock ? 1 : 2;
                            updata.type = updata.type ? 1 : 2;
                            return updata;
                        }
                        , callback: function (res) {
                            res.status && treeTable.reloadData('IDdeptTable');
                        }
                    });
                };

                function btn_edit(d) {
                    kaige.form({
                        title: '<i class="layui-icon layui-icon-edit"></i> 编辑'
                        , url: '/hrm.dept/edit' //数据源
                        , data: { id: d.id }
                        , id: 'kaige'
                        , area: ['800px', '450px']
                        , encode: 1
                        , callbefore: function () {
                            addeditform();
                        }
                        , postbefore: function (udata) {
                            var updata = udata;
                            updata.is_lock = updata.is_lock ? 1 : 2;
                            updata.type = updata.type ? 1 : 2;
                            return updata;
                        }
                        , callback: function (res) {
                            res.status && treeTable.reloadData('IDdeptTable');
                        }
                    });
                }

                function btn_look(d) {
                    kaige.details({
                        title: '<i class="layui-icon layui-icon-eye"></i> 查看'
                        , url: '/hrm.dept/look' //数据源
                        , data: { id: d.id }
                        , id: 'look'
                        , area: ['500px', '450px']
                        , overflow: 0
                        , callbefore: function () {
                            layui.element.render();
                        }
                    });
                }

                function btn_del(d) {
                    layer.confirm('真的要删除么', { icon: 3, title: '名称：' + d.name }, function (index) {
                        $.post('/hrm.dept/del', { id: d.id }, function (res) {
                            if (res.status) {
                                layer.msg(res.msg, { time: 1000 }, function () {
                                    treeTable.reloadData('IDdeptTable');
                                    layer.close(index);
                                });
                            } else {
                                layer.msg(res.msg);
                            }
                        });
                    });
                }

                //监听启禁用操作
                form.on('switch(status)', function (obj) {
                    var udata = {
                        id: (this.value).trim(),
                        field: 'status',
                        value: obj.elem.checked ? 1 : 2
                    };
                    szoa.post('/hrm.dept/setdisabled', udata, function (res) {
                        layer.tips(udata.value == 1 ? '启用' : '禁用', obj.othis);
                    });
                });

                //选择员工
                function dselemployee() {
                    tableSelect.render({
                        elem: '#sel_headman',
                        searchKey: 'keywords',
                        checkedKey: 'id',
                        table: {
                            url: '/select/employee',
                            cols: [[
                                { type: 'radio' },
                                { field: 'id', title: 'ID', hide: true },
                                { field: 'real_name', title: '姓名' },
                                { field: 'phone', title: '手机' },
                                { field: 'dept_id_name', title: '部门' }
                            ]]
                        },
                        done: function (elem, data) {
                            var NEWJSON = [], ids = [];
                            layui.each(data.data, function (index, item) {
                                NEWJSON.push(item.real_name);
                                ids.push(item.id);
                            })
                            elem.val(NEWJSON.join(","));
                            $('input[name=headid]').val(ids.join(","));
                        }
                    })
                }

            });
        });
    </script>
    <script type="text/html" id="kaige_form_html">
    <form class="layui-form layui-form-pane kaige-body-form" lay-filter="kaige_form_lay_filter">
      {{# if(d.id){ }}
        <input type="hidden" name="id" value="{{ d.id }}" />
      {{# } }}
        <div class="layui-form-item">
            <label class="layui-form-label">部门上级</label>
            <div class="layui-input-inline" style="margin-top: 1px;width:220px">
                <div id="dept_id_select_box"></div>
                <input type="hidden" id="dept_id_name" name="dept_id_name" />
                <input type="hidden" id="dept_id" value="{{ d.pid || '' }}" name="pid" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-inline" style="width:220px">
                <input type="text" name="name" required lay-verify="required" value="{{ d.name || '' }}" placeholder="请输入名称"
                    autocomplete="off" class="layui-input" />
            </div>
            <label class="layui-form-label">编码</label>
            <div class="layui-input-inline" style="width:220px">
                <input type="text" name="code" required lay-verify="required" value="{{ d.code || '' }}" placeholder="请输入编码"
                    autocomplete="off" class="layui-input" />
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">负责人</label>
            <div class="layui-input-inline" style="width:220px">
                <input type="text" name="headman" value="{{ d.headman|| '' }}" autocomplete="off" class="layui-input"
                    id="sel_headman" />
                <input type="hidden" name="headid" value="{{ d.headid|| '' }}" />
            </div>
            <label class="layui-form-label">所属单位</label>
            <div class="layui-input-inline" style="margin-top: 1px;width:220px">
                <div id="company_id_select_box"></div>
                <input type="hidden" id="company_id_name" value="{{ d.company_id_name || '' }}" name="company_id_name" />
                <input type="hidden" id="company_id" value="{{ d.company_id || '' }}" name="company_id" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline" style="width:220px">
                <input type="number" name="sort" class="layui-input" value="{{ typeof(d.sort)==='number' ? d.sort: '' }}" />
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline border3" style="width:219px">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" {{# if(d.status==1 ){ }} checked {{# }
                    }} />
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据
            </button>
        </div>
    </form>
  </script>
    <script type="text/html" id="status_td">
    <input type="checkbox" value="{{ d.id }}" data-id="{{ d.id }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ (d.status == 1) ? "checked" : "" }}/>
  </script>

    <script type="text/html" id="look_form_html">
    <div class="kaige-body">
        <table class="layui-table">
            <tr>
            <td style="width: 30%;">部门上级</td>
            <td>{{ d.dept_id_name || "无" }}</td>
            </tr>
            <tr>
            <td>部门名称</td>
            <td>{{ d.name }}</td>
            </tr>
            <tr>
            <td>部门编码</td>
            <td>{{ d.code }}</td>
            </tr>
            <tr>
            <td>负责人</td>
            <td>{{ d.headman }}</td>
            </tr>
            <tr>
            <td>所属单位</td>
            <td>{{ d.company_id_name }}</td>
            </tr>
            <tr>
            <td>排序</td>
            <td>{{ d.sort }}</td>
            </tr>
            <tr>
            <td>状态</td>
            <td>{{ d.status ==1 ? "启用":"禁用" }}</td>
            </tr>
        </table>
    </div>
  </script>
</body>

</html>